import React from 'react'
import { Link } from "react-router-dom";
import PageTitle from '../../components/page-title'
import { Button, Divider, Select, Input, Checkbox, TreeSelect } from 'antd'
const { Option } = Select;
const { SHOW_PARENT } = TreeSelect;

const treeDataModular = [
    {
        title: 'mtfront',
        value: '0-0',
        key: '0-0',
    },
    {
        title: 'tsetver',
        value: '0-1',
        key: '0-1',
    },
    {
        title: 'fibproxy',
        value: '0-2',
        key: '0-2',
    },
];

const treeDataFault = [
    {
        title: '1-单点',
        value: '0-0',
        key: '1-0',
    },
    {
        title: '多点',
        value: '1-1',
        key: '1-1',
    },
    {
        title: '三点',
        value: '1-2',
        key: '1-2',
    },
];


class RunAdd extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            valueModular: [],
            valueFault: []
        }
    }
    handleChange(e){
        console.log(e)
    }
    commit() {
        alert('验证提交参数 并且跳转路由页面到----Run')
    }
    onChangeModular = valueModular => {
        console.log('onChangeModular', valueModular);
        this.setState({ valueModular });
    }
    onChangeFault = valueFault => {
        console.log('onChangeFaut', valueFault);
        this.setState({ valueFault });
    }
    render() {
        const tPropsModular = {
            treeData:treeDataModular,
            value: this.state.valueModular,
            onChange: this.onChangeModular,
            treeCheckable: true,
            showCheckedStrategy: SHOW_PARENT,
            placeholder: '请选择模块名称',
            style: {
                width: '18.5%',
                marginLeft: '21px'
            },
        };
        const tPropsFault = {
            treeData:treeDataFault,
            value: this.state.valueFault,
            onChange: this.onChangeFault,
            treeCheckable: true,
            showCheckedStrategy: SHOW_PARENT,
            placeholder: '请选择故障方式',
            style: {
                width: '18%',
            },
        };

        return (
            <div id="page-wrapper">
                <div style={{ justifyContent: "center", display: "flex", marginTop: 20, }}>
                    <PageTitle title="新建执行集" /></div>
                <Divider />

                <div style={{ marginLeft: 30 }}>
                    <div>
                        <span>环境号</span><span>100</span>
                    </div>

                    <div style={{ justifyContent: "left", display: "flex", alignItems: "center", marginTop: 30 }}>
                        <div>执行集描述</div>
                        <Input style={{ width: 200, marginLeft: 8 }} placeholder="请输入描述(必填)" />
                        <div style={{ marginLeft: 40 }}>选取用例ID</div>
                        {/* <TreeSelect {...tProps} /> */}

                        <Select defaultValue="选择用例ID" style={{ width: 120, marginLeft: 20 }} onChange={(e) => this.handleChange(e)}>
                            <Option value="1" >1</Option>
                            <Option value="2" >2</Option>
                            <Option value="3" >3</Option>
                        </Select>
                    </div>

                    <div style={{ justifyContent: "left", display: "flex", alignItems: "center", marginTop: 30 }}>
                        <div>选取模块</div>
                        <TreeSelect {...tPropsModular} />


                        {/* <Select defaultValue="选择模块名称" style={{ width: 200, marginLeft: 20 }} onChange={(e) => this.handleChange(e)}>
                            <Option value="mtfront" >mtfront<Checkbox /></Option>
                            <Option value="tsetver" >tsetver <Checkbox /> </Option>
                            <Option value="fibproxy" >fibproxy <Checkbox /></Option>
                        </Select> */}

                        <div style={{ marginLeft: 40 }}>获取故障方式</div>
                        <TreeSelect {...tPropsFault} />


                        {/* <Select defaultValue="选择故障方式" style={{ width: 120, marginLeft: 10 }} onChange={(e) => this.handleChange(e)}>
                            <Option value="1单点" >1-单点<Checkbox /></Option>
                            <Option value="2双点" >2-双点<Checkbox /></Option>
                            <Option value="3三点" >3-三点<Checkbox /></Option>
                        </Select> */}
                    </div>

                    <div style={{ display: "flex", marginTop: 40, marginLeft: 200 }}>
                        <Button
                            type="primary"
                            size="large"
                            onClick={() => {
                                this.commit()
                            }}
                            style={{ marginRight: 45 }}>
                            生成
                        </Button>
                        <Button type="primary" size="large">
                            <Link to='/Run'>取消</Link>
                        </Button>
                    </div>
                </div>

            </div>

        )

    }

}
export default RunAdd